<template>
  <section class="pv-12 ph-16">
    <h3>电费单价设置</h3>
    <el-table :data="list" style="max-width: 500px;">
      <el-table-column label="电费单价" prop="unitPrice" min-width="250px">
        <template #default="{ row }">
          电费：{{ row.kwhPrice }}元/度
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="visible" @close="() => visible = false" :fullscreen="mobile" class="dialog-content-clear">
      <el-alert title="提示：电费单价设置应遵守《中华人民共和国电力法》相关规定。" type="warning" :closable="false" />
      <div style="padding: 16px 20px;">
        <el-form :model="form" ref="formRef" label-width="100px">
          <el-form-item label="电费" prop="kwhPrice" :rules="[{ required: true, message: '请输入电费单价', trigger: 'blur'},  { pattern: /^([1-9](\.\d{1,2})?|0\.[2-9]\d?|10)$/, message: '请设置电费单价为0.2 ~ 9.99元', trigger: 'blur'}]">
            <el-row :gutter="20" style="width: 100%">
              <el-col :span="16">
                <el-input v-model="form.kwhPrice" placeholder="请输入电费单价"></el-input>
              </el-col>
              <el-col :span="4">
                <span>元/度</span>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="服务费" prop="kwhServicePrice" :rules="[{ pattern: /^([1-9](\.\d{1,2})?|0\d?|10)$/, message: '请设置电费单价为0.0 ~ 9.99元', trigger: 'blur'}]">
            <el-row :gutter="20" style="width: 100%">
              <el-col :span="16">
                <el-input v-model="form.kwhServicePrice" placeholder="请输入服务费"></el-input>
              </el-col>
              <el-col :span="4">
                <span>元/度</span>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="管理费" prop="kwhManagePrice" :rules="[{ pattern: /^([1-9](\.\d{1,2})?|0\d?|10)$/, message: '请设置电费单价为0.0 ~ 9.99元', trigger: 'blur'}]">
            <el-row :gutter="20" style="width: 100%">
              <el-col :span="16">
                <el-input v-model="form.kwhManagePrice" placeholder="请输入管理费"></el-input>
              </el-col>
              <el-col :span="4">
                <span>元/度</span>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button @click="() => visible = false">取消</el-button>
        <el-button type="primary" @click="handleOk">保存</el-button>
      </template>
    </el-dialog>
  </section>
</template>
<script setup name="PowerRate">
import useAppStore from '@/store/modules/app'
import { getInfo as getConfig, edit } from '@/api/setting/waterElectricity'
import {toRefs} from "vue";

const { proxy } = getCurrentInstance()

const list = ref([])
const visible = ref(false)

const data = reactive({
  form: {
    kwhPrice: '',
    kwhServicePrice: '',
    kwhManagePrice: ''
  }
})
const configId = ref('')

const { form } = toRefs(data)

const mobile = computed(() => useAppStore().device === 'mobile')

function handleEdit(row) {
  form.value = { ...row }
  visible.value = true
}

function handleOk() {
  proxy.$refs['formRef'].validate(valid => {
    if (valid) {
      const params = {
        kwhPrice: form.value.kwhPrice,
        kwhServicePrice: form.value.kwhServicePrice,
        kwhManagePrice: form.value.kwhManagePrice,
      }
      if (configId.value !== '') {
        params.waterElectricityConfigId = configId.value
      }
      edit(params).then(res => {
        if (res.code === 200) {
          proxy.$modal.msgSuccess('保存成功')

          visible.value = false
          getInfo()
        }
      })
    }
  })
}

function getInfo() {
  getConfig().then(res => {
    const data = res.data
    list.value = [data]
    configId.value = data.waterElectricityConfigId
  })
}

getInfo()
</script>
<style lang="scss" scoped>
.dialog-content-clear {
  .el-form-item--default {
    margin-bottom: 18px;
  }
}
</style>
